<template>
  <section class="post_manage_header">
    <div class="post_manage_header__left">
      <el-form :inline="true"
               :model="form">
        <el-form-item label="岗位名称/代码">
          <el-input v-model="form.key"
                    placeholder="请输入岗位名称/代码"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status">
            <el-option v-for="item in statusOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="post_manage_header__right">
      <el-button type="primary"
                 icon="el-icon-plus"
                 @click="handleCreatePost">新增岗位</el-button>
    </div>
  </section>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "postManageHeader",
  data () {
    return {
      form: {
        key: '',
        status: null
      },
      statusOptions: [
        {
          value: null,
          label: "全部"
        },
        {
          value: 1,
          label: "启用"
        },
        {
          value: 2,
          label: "停用"
        }
      ],
    };
  },
  watch: {
    tableParams (val) {
      const { key, status } = val
      this.form = {
        key,
        status,
      }
    }
  },
  computed: {
    ...mapGetters({
      tableParams: "postManage/tableParams",
    })
  },
  methods: {
    ...mapActions({
      fetchTableData: "postManage/fetchTableData",
      createPost: "postManage/createPost"
    }),
    handleSearch () {
      const { key, status } = this.form
      this.fetchTableData({
        ...this.tableParams,
        key,
        status,
        page: 1
      })
    },
    handleReset () { 
      this.fetchTableData({
        ...this.tableParams,
        key: '',
        status: null,
        page: 1
      })
    },
    handleCreatePost () {
      this.createPost();
    }
  }
};
</script>
<style scoped>
.post_manage_header {
  overflow: hidden;
}
.post_manage_header__left {
  float: left;
}

.post_manage_header__right {
  float: right;
}
</style>
